<template>
  <div class="tagsDialog">
    <el-dialog
      title="选择标签"
      :close-on-click-modal="false"
      :visible.sync="tagsDialogVisible"
      :before-close="handleClose"
      :append-to-body="appendTo"
      width="800px"
    >
      <div class="clearfix">
        <el-col :span="24">
          <el-col :span="12">
            <div>重点内容</div>
          </el-col>
          <el-col :span="12">
            <div>能力提升点</div>
          </el-col>
        </el-col>
      </div>
      <div
        class="content clearfix"
        style="margin-top: 20px; border-top: 1px solid #ccc; padding: 0 30px;"
      >
        <el-col :span="24">
          <el-col
            :span="10"
            style="height: 340px; padding: 20px 0; overflow-y: auto; border-right: 1px solid #ccc;"
          >
            <el-radio-group
              v-if="importTagsList"
              v-model="keynote"
              class="padding30"
              @change="radioChange"
            >
              <el-col
                v-for="(item, index) in importTagsList"
                :key="index"
                :span="24"
                class="marginT20"
              >
                <el-radio :label="item.tagsId">{{ item.tagsName }}</el-radio>
              </el-col>
              <!-- <el-col :span="24" class="marginT20">
                <el-radio label="线下场地免费" />
              </el-col>-->
            </el-radio-group>
          </el-col>
          <el-col
            :span="12"
            :offset="2"
            style="height: 340px; padding: 20px 0; overflow-y: auto; border-right: 1px solid #ccc;"
          >
            <el-checkbox-group v-if="ByPMapperList" v-model="abilityArr" @change="checkboxChange">
              <el-col
                v-for="(item, index) in ByPMapperList"
                :key="index"
                :span="24"
                class="marginT20"
              >
                <el-checkbox :label="item.tagsId" name="abilityArr">
                  {{
                  item.tagsName
                  }}
                </el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-col>
        </el-col>
        <el-col :span="24" class="marginT20">
          <el-col :span="8">
            <el-input v-model="keynoteValue" placeholder="输入自定义内容">
              <el-button
                slot="append"
                type="primary"
                @click="getAddContentTags(null, 'IMPORTANT', keynoteValue)"
              >添加</el-button>
            </el-input>
          </el-col>
          <el-col :span="12" :offset="4">
            <el-input v-model="abilityValue" placeholder="输入自定义内容">
              <el-button
                slot="append"
                type="primary"
                @click="
                  getAddContentTags(
                    keynote,
                    'ABILITY_ENHANCEMENT',
                    abilityValue
                  )
                "
              >添加</el-button>
            </el-input>
          </el-col>
        </el-col>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="next(false)">取 消</el-button>
        <el-button type="primary" @click="next(true)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/** *

  list 对象说明
    GROWTH_CLASSIFY: 成长分类,
    STAGE: 学段,
    SUBJECT: 学科,
    DOWNSTATUS: 是否继续查询能力提升标签
    keynote: 重难点默认选项
    abilityArr: 内容提升默认选项
    tagList: 默认选项 - 去除重难点显示
    isAdd: 是否添加

  Callback 回调
    keynote: 重点内容,
    ability: 能力提升,
    dialogVisible: model状态
 * */

import {
  findImportTagsList,
  findByPMapper,
  addContentTags
} from '@/api/content';
import { Handler } from 'mockjs';
export default {
  name: 'TagsDialog',
  props: ['list', 'dialogVisible', 'appendToBody'],
  data () {
    return {
      listData: this.list,
      tagsDialogVisible: this.dialogVisible,
      keynote: this.list.keynote ? this.list.keynote : '', // 重难点选项
      abilityArr: this.list.abilityArr ? this.list.abilityArr : [], // 内容提升选项
      keynoteValue: '',
      abilityValue: '',
      importTagsList: null,
      ByPMapperList: null,
      appendTo: this.appendToBody ? this.appendToBody : false
    };
  },
  computed: {},
  watch: {
    list: {
      deep: true,
      Handler (data) {
        this.listData = data;
        console.log('this.listData:', this.listData);
      }
    },
    dialogVisible (newName, oldName) {
      this.tagsDialogVisible = newName;
    }
  },
  created () {
    console.log('list:', this.list);
    this.getFindImportTags();
  },
  methods: {
    radioChange (id) {
      console.log(id);
      this.getFindByPMapper(id);
      this.keynote = id;
      this.abilityArr = [];
    },
    checkboxChange (item) {
      console.log(item);
    },

    // 重难点
    getFindImportTags () {
      var data = {
        growthClassify: this.listData.GROWTH_CLASSIFY.itemCode,
        stageId: this.listData.STAGE.itemCode,
        subjectId: this.listData.SUBJECT.itemCode
      };
      findImportTagsList(data).then(res => {
        this.importTagsList = res.data;
        console.log('重难点:', res.data);
        console.log('this.listData:', this.listData);

        if (this.listData.isAdd) {
          this.listData.tagList.map(item => {
            this.importTagsList.map((tagsItem, tagsInx) => {
              if (item.tagId === tagsItem.tagsId) {
                this.importTagsList.splice(tagsInx, 1);
              }
            });
          });
        }

        if (this.listData.DOWNSTATUS) {
          this.keynote = this.keynote
            ? this.keynote
            : this.importTagsList[0].tagsId;
          this.getFindByPMapper(this.keynote);
        }
      });
    },

    // 能力提升
    getFindByPMapper (id) {
      var data = {
        pMapperTagsId: id
      };
      findByPMapper(data).then(res => {
        this.ByPMapperList = res.data;
        console.log('ByPMapperList:', this.ByPMapperList);
        console.log('abilityValue:', this.abilityValue);
      });
    },

    // 新增内容标签
    getAddContentTags (mapperPTagsId, tagsGroupEnum, tagsName) {
      var data = {
        growthClassify: this.listData.GROWTH_CLASSIFY.itemCode,
        mapperPTagsId: mapperPTagsId,
        pTagsId: null,
        stageId: this.listData.STAGE.itemCode,
        subjectId: this.listData.SUBJECT.itemCode,
        tagsGroupEnum: tagsGroupEnum,
        tagsName: tagsName
      };
      addContentTags(data).then(res => {
        if (tagsGroupEnum === 'IMPORTANT') {
          this.importTagsList.push(res.data);
          this.keynoteValue = '';
        }
        if (tagsGroupEnum === 'ABILITY_ENHANCEMENT') {
          this.ByPMapperList.push(res.data);
          this.abilityValue = '';
        }
      });
    },

    next (status) {
      var importItems = this.importTagsList.filter(
        item => item.tagsId === this.keynote
      );

      console.log('importItems:', importItems);
      var abilityArr = [];
      var obj;
      if (status && this.abilityArr.length > 0) {
        this.abilityArr.map(item => {
          var abilityItems = this.ByPMapperList.filter(
            byItem => item === byItem.tagsId
          );
          abilityArr.push(abilityItems[0]);
        });

        this.tagsDialogVisible = false;
        obj = {
          keynote: importItems,
          ability: abilityArr,
          dialogVisible: false,
          isAdd: this.listData.isAdd
        };
        this.$emit('Callback', obj);
      } else if (status) {
        this.$message({
          message: '能力提升点不能为空',
          type: 'warning'
        });
      } else {
        this.tagsDialogVisible = false;
        obj = {
          dialogVisible: false,
          isAdd: this.listData.isAdd
        };
        this.$emit('Callback', obj);
      }
    },
    handleClose (done) {
      this.tagsDialogVisible = false;
      var obj = {
        dialogVisible: false,
        isAdd: this.listData.isAdd
      };
      this.$emit('Callback', obj);
      done();
    }
  }
};
</script>

<style lang="scss" scoped></style>
